<template>
  <div class="confirm-wrap">
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <div class="van-contact-card " @click="manageAdress">
      <div  class="icon-bg">
        <van-icon name="location-o" color="#efefef" size="20"/>
      </div>
      <div class="location">
        <div class="user-info">
          <span>{{ checkedAddress.name }}</span>
          <span class="small-font">{{ checkedAddress.tel }}</span>
        </div>
        <p class="small-font margin-top-5">{{ checkedAddress.addressDetail }}</p>
      </div>
      <van-icon class="right-arrow" name="arrow" size="20"/>
    </div>
    <cart-items :list="goods">
      <template #footer>
        <div>
          <van-cell title="配送方式" :value="'快递¥'+freightPrice"/>
        </div>
      </template>
    </cart-items>
    <div class="card">
      <van-cell title="商品总额">
        <template #default>
          <span class="black-font">¥{{ goodsTotalPrice }}</span>
        </template>
      </van-cell>
      <van-cell title="运费">
        <template #default>
          <span class="red-font">{{freightPrice>0?'¥'+freightPrice:'免运费'}}</span>
        </template>
      </van-cell>
      <van-cell title="优惠券" @click="showCoupon">
        <template #default>
          <span :class="{'red-font':couponPrice>=0,'normal-font':couponPrice<=0}">{{handleText(couponPrice, availableCouponLength)}}</span>
        </template>
      </van-cell>

      <van-field style="color: black" v-model="message" label="买家留言" input-align="right" placeholder="留言内容尽量和商家沟通"/>

      <div class="bottom-price"><span>总计:<span class="red-font">¥{{actualPrice}}</span></span></div>
    </div>
    <van-submit-bar :price="actualPrice*100" button-text="确认订单" @submit="openWaitPay"/>
    <van-popup
      v-model="showCouponList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import CartItems from '../../components/CartItems'
import {cartCheckout, couponExchange, couponSelectList} from '../../api/items'
import {orderSubmit} from '../../api/order'
import {Toast} from "vant";

export default {
  name: 'Confirm',
  components: {CartItems},
  data () {
    return {
      chosenCoupon: '',
      coupons: [],
      disabledCoupons: [],
      userCouponId: 0,
      showCouponList: false,
      availableCouponLength: 0, // 可用的优惠券数量
      goodsTotalPrice: 0, // 商品总价
      freightPrice: 0, // 快递费
      couponPrice: 0, // 优惠券的价格
      grouponPrice: 0, // 团购优惠价格
      orderTotalPrice: 0, // 订单总价
      actualPrice: 0, // 实际需要支付的总价
      couponId: -1,
      addressId: -1,
      checkedAddress: {},
      message: '',
      goods: [
        {
          id: 1,
          checked: false,
          goodsName: '测试标题',
          price: 111,
          number: 2,
          picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        }, {
          id: 1,
          checked: false,
          goodsName: '测试标题',
          price: 111,
          number: 2,
          picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        }, {
          id: 1,
          checked: false,
          goodsName: '测试标题',
          price: 111,
          number: 2,
          picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg'
        }
      ]
    }
  },
  created () {
    this.checkout(0, 0)
  },
  methods: {
    handleText (num, condition) {
      if (num >= 0) {
        return '¥' + num
      } else {
        if (condition < 0) {
          return '无可用'
        } else {
          return '去使用'
        }
      }
    },
    onChange (index) {
      this.showCouponList = false
      this.chosenCoupon = index
      let cid = -1
      let id = -1
      if (index >= 0) {
        let coupon = this.coupons[index]
        cid = coupon.cid
        id = coupon.id
      }
      this.checkout(cid, id)
    },
    onExchange (code) {
      couponExchange({code: code}).then(res => {
        Toast.success('兑换成功')
      })
    },
    showCoupon () {
      couponSelectList().then(res => {
        var cList = res.data.data.list
        this.coupons = []
        this.disabledCoupons = []
        for (var i = 0; i < cList.length; i++) {
          var c = cList[i]

          var coupon = {
            id: c.id,
            cid: c.cid,
            name: c.name,
            condition: '满' + c.min + '元可用',
            value: c.discount * 100,
            description: c.desc,
            startAt: new Date(c.startTime).getTime() / 1000,
            endAt: new Date(c.endTime).getTime() / 1000,
            valueDesc: c.discount,
            unitDesc: '元'
          }
          if (c.available) {
            this.coupons.push(coupon)
          } else {
            this.disabledCoupons.push(coupon)
          }
        }

        this.showCouponList = true
      })
    },
    checkout (cid, id) {
      cartCheckout({cartId: this.$route.params.id, couponId: cid, userCouponId: id}).then(res => {
        let data = res.data.data
        this.goods = data.checkedGoodsList
        this.availableCouponLength = data.availableCouponLength
        this.goodsTotalPrice = data.goodsTotalPrice
        this.goodsTotalPrice = data.goodsTotalPrice
        this.couponPrice = data.couponPrice
        this.freightPrice = data.freightPrice
        this.grouponPrice = data.grouponPrice
        this.orderTotalPrice = data.orderTotalPrice
        this.actualPrice = data.actualPrice
        this.addressId = data.addressId
        this.couponId = data.couponId
        this.userCouponId = data.userCouponId
        this.checkedAddress = data.checkedAddress
      })
    },
    manageAdress () {
      this.$router.push({name: 'address'})
    },
    back () {
      this.$router.back()
    },
    openWaitPay () {
      // todo 无地址提示
      orderSubmit({
        addressId: this.addressId,
        cartId: 0,
        couponId: this.couponId,
        userCouponId: this.userCouponId,
        grouponLinkId: 0,
        grouponRulesId: 0,
        message: this.message
      }).then(res => {
        let orderId = res.data.data.orderId
        this.$router.push({
          name: 'payment',
          params: { orderId: orderId }
        })
      }).catch(() => {
        this.isDisabled = false
        this.$toast('下单失败')
      })
    }
  }
}
</script>

<style scoped>
.confirm-wrap {
  padding-bottom: 20px;
  height: 100%;
  flex: 1;
}

.bottom-price {
  font-size: 14px;
  margin: 10px 10px;
  text-align: right;
}

.right-arrow {
  margin-left: 10px;
}

.small-font {
  color: #c5c5c5;
  font-size: 14px;

}
.margin-top-5{
  margin-top: 5px;
}

.user-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.top-radius-card {
  background: white;
  margin: 5px 5px 0 5px;
  border-radius: 5px 5px 0 0;
  box-shadow: 2px 3px 3px rgb(138, 138, 138);
}

.bottom-radius-card {
  background: white;
  margin: 0 5px 5px 5px;
  border-radius: 0 0 5px 5px;
  box-shadow: 2px 3px 3px rgb(138, 138, 138);
}

.van-contact-card {
  box-shadow: 2px 3px 3px rgb(138, 138, 138);
  background: white;
  position: relative;
  display: flex;

  align-items: center;
  flex-direction: row;

}
.icon-bg{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #ff6034, #ee0a24);
  padding: 6px;
  border-radius: 40px;

}
.location {
  flex: 1;
  margin-left: 10px;
}

.van-contact-card::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: -webkit-repeating-linear-gradient(
    135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background: repeating-linear-gradient(
    -45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
  background-size: 80px;
  content: '';
}

.red-font {
  color: #E65D6E;
}
.normal-font{
  color: #c5c5c5;
}
.black-font{
  color: black;
}
</style>
